<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/header.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css"/>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/vue/vue.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <title>用户管理</title>
</head>
<style>
    iframe {
        position: relative;
        float: left;
        display: block;
    }
</style>
<body>
<div class="container-fluid" id="all">
    <div class="row">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>用户管理菜单</legend>
        </fieldset>
        <div class="btn btn-danger" style="float: right" @click="tohome">退出登录</div>
        <div class="btn btn-danger" style="float: right" id="hh">注销账号</div>
        <div style="float:right;margin: 10px 10px;">用户 {{userName}} 欢迎你！</div>
    </div>
    <div class="col-md-3" style="width: 230px; padding: 0px;margin-top: 30px;">

        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
            <li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">展开管理</a>
                <dl class="layui-nav-child">
                    <dd>
                        <%--      userMessage              --%>
                        <a href="#" @click="change('/tousermessage')">我的信息</a>
                    </dd>
                    <dd>
                        <%--       BooksList            --%>
                        <a href="#" @click="change('/toBooksList')">查看书籍</a>
                    </dd>
                    <dd>
                        <%--      lendList              --%>
                        <a href="#" @click="change('/toBooks')">我的借阅</a>
                    </dd>
                    <dd>
                        <%--      UpdateUserMessage              --%>
                        <a href="#" @click="change('/getuser')">修改我的信息</a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="col-md-8">
        <iframe id="myframe" :src="isrc" frameborder="0" height="600px" width="1000px"></iframe>
    </div>
</div>
</body>
<script src="${pageContext.request.contextPath}/static/axios/axios.js"></script>
<script>
    let vm = new Vue({
        el: '#all',
        data: {
            userName: "userName",
            isrc: "${pageContext.request.contextPath}/hello.html",
            //${pageContext.request.contextPath}/static/images/library.jpg
        },
        mounted() {
            axios.get("${pageContext.request.contextPath}/getName?action=1")
                .then(resp => this.userName = resp.data)
                .catch(function (error) {
                        alert("用户名错误" + this.userName)
                    }
                )
        },
        methods: {
            change: function (data) {
                this.isrc = "${pageContext.request.contextPath}" + data;
            }
            ,
            tohome: function () {
                window.location = "${pageContext.request.contextPath}/index.jsp";
            }
        }
    });
    $("#hh").click(function () {
        $.ajax({
            type: "get",
            url: "${pageContext.request.contextPath}/deleteUser",
            dataType: "text",
            success: function (res) {
                if (res > 0) {
                    alert("注销成功");
                    top.location.href = "${pageContext.request.contextPath}/touser";
                } else {
                    alert("该账号还存在借阅书籍未归还，无法注销");
                }
            }
        });
    });
</script>
</html>
